<template>
    <view id="searchBox">
        <view id="searchInput">
            <input type="text" placeholder="请输入搜索内容" v-model="inputName">
            <text @click="searchFun">搜索</text>
        </view>
        <view class="searchHot" v-if="historyShowFun">
            <view>
                <text>历史搜索</text>
                <image src="../../static/icon/clear.png" @click="clearHistoryFun"></image>
            </view>
            <view class="searchClass">
                <button v-for="(item,index) in searchInputArr" :key="index" @click="searchBtn($event)" :data-id="item">{{item}}</button>
            </view>
        </view>
        <view class="searchHot">
            <view>
                <text>热门搜索</text>
            </view>
            <view class="searchClass">
                <button v-for="(item,index) in searchArr" :key="index" @click="searchBtn($event)" :data-id="item.name">{{item.name}}</button>
            </view>
        </view>
        <car></car>
    </view>
</template>

<script>
    import * as url from '../../until/api'
    import car from '../../until/com/car'
    export default {
        name: "search",
        components:{car},
        data(){
            return{
                searchArr:[],//请求回的数据
                inputName:'',//input框中的值
                searchInputArr:[],//历史记录，存在本地的数据
            }
        },
        computed:{
            historyShowFun(){//计算历史记录的长度
                if(this.searchInputArr.length > 0) return true
                if(this.searchInputArr.length === 0) return  false
            }
        },
        mounted() {
            const _this = this
            uni.getStorage({//发起请求，获取本地数据
                key: 'searchPageInputArr',
                success: function (resp){
                    _this.searchInputArr = resp.data
                }
            })
            uni.request({//发起请求，获取热门搜索
                url:url.getHotData,
                method:'POST',
                success:resp=>{
                    if(resp.data.code === 200) return this.searchArr = resp.data.data
                }
            })

        },
        methods:{
            searchFun(){//点击搜索，获取数据
                this.searchInputArrFun(this.inputName)
            },
            searchBtn(e){//点击btn，获取数据
                this.inputName = e.target.dataset.id
                this.searchInputArrFun(this.inputName)
                uni.navigateTo({
                    url:"../../pages/yhq/yhq"
                })
            },
            searchInputArrFun(obj){//将搜索的内容单独存储
                if(this.searchInputArr.indexOf(obj) < 0) {
                    this.searchInputArr.push(obj)
                    this.setSearchInputArr(this.searchInputArr)
                }
            },
            clearHistoryFun(){//清空历史记录
                this.searchInputArr = []
                this.setSearchInputArr(this.searchInputArr)
            },
            setSearchInputArr(obj){//将搜索记录存储在本地
                uni.setStorage({
                    key: 'searchPageInputArr',
                    data:obj,
                    success: function () {
                        console.log('success');
                    }
                })
            }
        }
    }
</script>

<style scoped>
    body{
        width: 10rpx;
        height: 10rpx;
        font-size: 16rpx;
    }
    #searchBox{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }
    #searchInput{
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        background-color: #17B357;
    }
    #searchInput>input{
        border: none;
        display: inline-block;
        width: 60%;
        height: 2rem;
        float: left;
        border-radius:1rem;
        background-color: #ffffff;
        margin-top: 0.5rem;
        font-size: 0.5em;
        padding-left: 1rem;
        margin-left: 1rem;
    }
    #searchInput>text{
        display: inline-block;
        width: 20%;
        height: 1.5rem;
        text-align: center;
        line-height: 1.5rem;
        font-size: 1rem;
        float: left;
        margin-top: 0.75rem;
        margin-left: 1rem;
        color: #ffffff;
    }
    .searchHot{
        display: flex;
        width: 94%;
        height: auto;
        flex-wrap: wrap;
        margin: 1rem auto 0;
    }
    .searchHot>view{
        width: 100%;
    }
    .searchHot>view>text{
        display: inline-block;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.5rem;
        width: 50%;
        float: left;
    }
    .searchHot>view>image{
        display: inline-block;
        height: 1rem;
        width: 1rem;
        float: right;
        margin-right: 1rem;
    }
    .searchClass{
        width: 100%;
        display: flex;
        height: auto;
        flex-wrap: wrap;
        margin-top: 0.5rem;
    }
    .searchClass>button{
        font-size: 0.8rem;
        margin: 0.5rem 0.5rem 0 0 ;
    }
</style>